<template>
	<view class="count">
		<view class="avaBox">
			<image :src="avatar" class="avat" mode="aspectFit"></image>
			<image src="/static/xiangji.png" @click="chooseavatarFn" class="xiangji"></image>
		</view>
		<view class="body">
			<view class="bodys f f-a-c f-j-b p-20 b-f b-r-20">
				<view class="name">
					猫猫昵称
				</view>
				<input type="text" v-model="name" class="inp" placeholder="请输入猫猫昵称" name="" id="">
			</view>
			<view class="sex p-20 b-f b-r-20">
				<view @click="show=true" class="breed f f-a-c f-j-b">
					<view class="name">
						猫猫性别
					</view>
					<view class="rigInp f f-a-c">
						{{sex}}
						<image src="/static/jiantou.png" class="rightImg" mode=""></image>
					</view>
				</view>
				<view class="xian"></view>
				<view @click="breed" class="breed f f-a-c f-j-b">
					<view class="name">
						猫猫品种
					</view>
					<view class="rigInp f f-a-c">
						{{theCat}}
						<image src="/static/jiantou.png" class="rightImg" mode=""></image>
					</view>
				</view>
			</view>
			<view class="sex p-20 b-f b-r-20">
				<view @click="shows=true" class="breed f f-a-c f-j-b">
					<view class="name">
						出生日期
					</view>
					<view class="rigInp f f-a-c">
						{{defaultTime}}
						<image src="/static/jiantou.png" class="rightImg" mode=""></image>
					</view>
				</view>
				<view class="xian"></view>
				<view @click="shows2=true" class="breed f f-a-c f-j-b">
					<view class="name">
						到家日期
					</view>
					<view class="rigInp f f-a-c">
						{{defaultTimes}}
						<image src="/static/jiantou.png" class="rightImg" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<u-popup mode="bottom" border-radius="30" v-model="show">
			<view class="editl">
				<view class="setSex">
					选择性别
				</view>
				<view class="bodyBao f f-w-w f-a-c">
					<view v-for="(item,index) in list" @click="qieHuan(item,index)" :key="index"
						class="bodyBaoItem f f-a-c f-d-c f-j-c ">
						<view class="avart" :class="{act:index==ind}">
							<image v-if="item.img" :src="item.img" class="touImg" mode=""></image>
							<image src="/static/icon@2x.png" v-if="index==ind" class="duigou" mode=""></image>
						</view>
						<view class="Baby">
							{{item.name}}
						</view>
					</view>
				</view>
				<view @click="isOk" class="comfig">
					确定
				</view>
			</view>
		</u-popup>
		<u-picker @confirm="confirmFn" mode="time" :params="params" :default-time="defaults" v-model="shows"></u-picker>
		<u-picker @confirm="confirmFn2" mode="time" :params="params" :default-time="defaultss"
			v-model="shows2"></u-picker>
		<view @click="goAddPuss" class="addInd">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: '/static/avat.png',
				shows: false,
				shows2: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				sex: '请选择',
				catBreed: [],
				cat: {},
				theCat: '请选择',
				defaultTime: '请选择',
				defaultTimes: '请选择',
				defaults: '',
				defaultss: '',
				name: '',
				show: false,
				ind: 0,
				url: uni.getStorageSync('upload_domain'),
				domain: uni.getStorageSync('domain'),
				list: [{
						name: '男宝宝',
						img: '/static/Layer_1@2x.png',
						id: 1
					},
					{
						name: '女宝宝',
						img: '/static/Layer_1_1@2x.png',
						id: 2
					},
					{
						name: '未绝育',
						img: '/static/Layer_1_2@2x.png',
						id: 3
					},
					{
						name: '已绝育',
						img: '',
						id: 4
					}
				],
				num: 1,
				idPut: 0
			}
		},
		onReady() {
			let date = new Date()
			const year = date.getFullYear();
			const month = date.getMonth() + 1;
			const data = date.getDate(); //天
			var hours = date.getHours(); // 获取小时数
			var minutes = date.getMinutes(); // 获取分钟数
			this.defaults = year + '-' + month + '-' + data
			this.defaultss = year + '-' + month + '-' + data
		},
		onShow() {
			let n = uni.getStorageSync('cat')
			this.cat = n
			this.theCat = n.name
		},
		onLoad(options) {
			this.num = options.num
			this.idPut = options.id
			if (options.num == 2) {
				this.init(options.id)
			}
		},
		methods: {
			async init(id) {
				let n = await this.$api.catDetils({
					id: id
				})
				this.theCat = n.data.breed_name
				this.name = n.data.name
				this.avatar = n.data.avatar

				this.sex = n.data.gender == 1 ? '男宝宝' : n.data.gender == 2 ? '女宝宝' : n.data.gender == 3 ? '未绝育' : '已绝育'
				this.defaultTime = new Date(n.data.birthday_time).getFullYear() + '-' + (Number(new Date(n.data
						.birthday_time)
					.getMonth() + 1) < 10 ? '0' + Number(new Date(n.data.birthday_time)
					.getMonth() + 1) : Number(new Date(n.data.birthday_time)
					.getMonth()) + 1) + '-' + (new Date(n.data.birthday_time).getDate() < 10 ? '0' + new Date(n
					.data
					.birthday_time).getDate() : new Date(n.data.birthday_time).getDate())


				this.defaultTimes = new Date(n.data.adopted_time).getFullYear() + '-' + (Number(new Date(n.data
						.adopted_time)
					.getMonth() + 1) < 10 ? '0' + Number(new Date(n.data.adopted_time)
					.getMonth() + 1) : Number(new Date(n.data.adopted_time)
					.getMonth() + 1)) + '-' + (new Date(n.data.adopted_time).getDate() < 10 ? '0' + new Date(n.data
					.adopted_time).getDate() : new Date(n.data.adopted_time).getDate())
			},
			// 点击添加宠物 qweqweqeweqwqweewqqweqweqweqwe
			async goAddPuss() {
				let one = +new Date(this.defaultTime)
				let tow = +new Date(this.defaultTimes)
				if (one > tow) return this.$msg('到家时间要晚于出生日期')
				if (this.num == 1) {
					let n = await this.$api.addCat({
						breed_id: this.cat.id,
						avatar: this.avatar,
						name: this.name,
						gender: this.sex == '男宝宝' ? 1 : this.sex == '女宝宝' ? 2 : this.sex == '未绝育' ? 3 : 4,
						birthday_time: this.defaultTime,
						adopted_time: this.defaultTimes
					})
					this.$msg(n.msg)
					if (n.code == 200) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				} else if (this.num == 2) {
					let n = await this.$api.petsPut({
						breed_id: this.cat.id,
						avatar: this.avatar,
						name: this.name,
						gender: this.sex == '男宝宝' ? 1 : this.sex == '女宝宝' ? 2 : this.sex == '未绝育' ? 3 : 4,
						birthday_time: this.defaultTime,
						adopted_time: this.defaultTimes
					}, this.idPut)
					this.$msg(n.msg)
					if (n.code == 200) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}

				}
			},
			//修改头像
			chooseavatarFn(e) {
				uni.chooseImage({
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: uni.getStorageSync('upload_domain'), // 上传地址
							filePath: tempFilePaths[0], // 要上传的文件路径
							name: 'file', // 上传文件对应的 key 值
							method: 'POST',
							formData: {
								key: `${this.$u.timeFormat(new Date(), 'yyyy-mm-dd')}/${this.randomString()}.png`,
								token: uni.getStorageSync('upload_token'),
							},
							success: (uploadRes) => {
								// 上传成功处理逻辑
								this.$msg('上传成功')
								let url = JSON.parse(uploadRes.data).key
								this.avatar = uni.getStorageSync('domain') + '/' + url
							},
							fail: function(error) {
								// 上传失败处理逻辑
								this.$msg('上传失败')
							},
							complete: function() {}
						});
					},
					fail: err => {

					}
				})

			},
			confirmFn(e) {
				this.defaultTime = e.year + '-' + e.month + '-' + e.day
			},
			confirmFn2(e) {
				this.defaultTimes = e.year + '-' + e.month + '-' + e.day
			},
			// 去猫猫品种
			breed() {
				uni.navigateTo({
					url: '/pages/home/CatBreed'
				})
			},
			// /点击选择性别
			isOk() {
				this.sex = this.list[this.ind].name
				this.show = false
			},
			qieHuan(item, index) {
				this.ind = index
			},
			randomString() {
				let str = 'ABCDEFGHIJKIMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
				let num = '';
				for (let i = 0; i < 16; i++) {
					num += str.charAt(Math.floor(Math.random() * str.length));
				}
				console.log(num, '000000000000');
				return num;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addInd {
		position: fixed;
		width: 90%;
		height: 96rpx;
		line-height: 90rpx;
		text-align: center;
		background: $brown;
		border-radius: 48rpx;
		box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(151, 121, 97, 0.20);
		bottom: 80rpx;
		left: 50%;
		transform: translateX(-50%);
		color: #ffffff;
		font-weight: 500;
	}

	.editl {
		padding-top: 30rpx;
		padding-bottom: 60rpx;

		.comfig {
			width: 90%;
			height: 96rpx;
			margin: 0 auto;
			line-height: 96rpx;
			background: $brown;
			border-radius: 48rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 600;
			text-align: center;
			color: #ffffff;
			margin-top: 30rpx;
		}

		.setSex {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 600;
			text-align: CENTER;
			color: $hei;
			margin-bottom: 70rpx;
		}

		.bodyBao {
			.bodyBaoItem {
				width: 50%;
				margin-bottom: 40rpx;

				.Baby {
					margin-top: 16rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 600;
					text-align: center;
					color: #2f2319;
					margin-top: 15rpx;
				}

				.avart {
					position: relative;
					width: 160rpx;
					height: 160rpx;
					background: $f1eeeb;
					border-radius: 80rpx;
					border: 2rpx solid transparent;

					.duigou {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						bottom: 0;
						right: 0;
					}

					.touImg {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 100rpx;
						height: 100rpx;
					}
				}
			}

			.act {
				border: 2rpx solid #977961 !important;
			}

		}
	}



	.sex {
		margin-bottom: 25rpx;

		.breed {
			padding: 20rpx 0;

			.name {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: LEFT;
				color: $hei;
			}

			.rigInp {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: #cbc2bb;

				.rightImg {
					width: 15rpx;
					height: 25rpx;
					margin-left: 10rpx;
				}
			}
		}

		.xian {
			height: 2rpx;
			width: 100%;
			background-color: #f2efec;
			margin: 20rpx 0;
		}
	}

	.body {
		width: 90%;
		margin: 0 auto;
		margin-top: 50rpx;


		.bodys {
			padding: 30rpx 20rpx;
			margin-bottom: 25rpx;

			.name {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: LEFT;
				color: $hei;
			}

			.inp {
				text-align: right;
			}
		}
	}

	.avaBox {
		width: 162rpx;
		height: 160rpx;
		margin-top: 80rpx;
		position: relative;
		margin-left: 50%;
		transform: translateX(-50%);

		.avat {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		.xiangji {
			position: absolute;
			width: 58rpx;
			height: 56rpx;
			bottom: 0;
			right: 0;
		}
	}
</style>